﻿@model IEnumerable<Hrm.Services.ClassMateDto>
@{
    Layout = "~/Views/Shared/_ClassMateMobileLayout.cshtml";
}
<section class="ui-container">
    <div id="ClassMateContent" class="ui-whitespace">
        @foreach (var item in Model)
        {
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="animated fadeIn" style="width: 100%; height: 300px; margin-top: 10px; background: url('@item.ImageUrl') no-repeat 50% 50%;background-size: contain;">
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">姓名</label>
                        <input type="text" value="@item.Name" readonly>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">电话</label>
                        <a class="phoneClass" href="tel:@item.Phone">@item.Phone</a>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">QQ</label>
                        <input type="text" value="@item.QQ" readonly>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">微信</label>
                        <input type="text" value="@item.WeChat" readonly>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">公司</label>
                        <input type="text" value="@item.Company" readonly>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">学校</label>
                        <input type="text" value="@item.SchoolName" readonly>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">地址</label>
                        <input type="text" value="@item.Address" readonly>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-form-item-textarea ui-border-b">
                        <label>介绍</label>
                        <textarea readonly>@item.Description</textarea>
                    </div>
                </form>
            </div>
        }

        
    </div>
</section>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.Bmz.dPage-1.01.1.js"></script>
@section JavascriptSection
{
    <script>
    $(function () {
        $("#ClassMateContent").InitialPage({
            pageSize: 10,
            pageCount: @ViewBag.recordsTotal,
            pageIndex: 2,
            loadHtml:'<div class="ui-loading-wrap"><p>正在加载中...</p><i class="ui-loading"></i></div>',
            nextPageFunction: function (pageStart, pageSize) {
                $.ajax({
                    type: "post",
                    url: '@Url.Action("PageList")',
                        dataType:"json",
                        data: {
                            start: pageStart,
                            length: pageSize,
                            filter: { Name:"" }
                        },
                        success: function (result) {
                            var data = result.data;
                            var htmlContext = '';
                            for(var index in data)
                            {
                                htmlContext += '<div class="ui-form ui-border-t">'+
                                    '<form action="#">'+
                                        '<div class="animated fadeIn" style="width: 100%; height: 300px; margin-top: 10px; background: url(\''+data[index].ImageUrl+'\') no-repeat 50% 50%;background-size: contain;">'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                            '<label class="ui-border-r">姓名</label>'+
                                            '<input type="text" value="'+data[index].Name+'" readonly>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                            '<label class="ui-border-r">电话</label>'+
                                            '<a class="phoneClass" href="tel:'+(data[index].Phone==null?'':data[index].Phone)+'">'+(data[index].Phone==null?'':data[index].Phone)+'</a>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                           ' <label class="ui-border-r">QQ</label>'+
                                            '<input type="text" value="'+(data[index].QQ==null?'':data[index].QQ)+'" readonly>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                            '<label class="ui-border-r">微信</label>'+
                                            '<input type="text" value="'+(data[index].WeChat==null?'':data[index].WeChat)+'" readonly>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                            '<label class="ui-border-r">公司</label>'+
                                            '<input type="text" value="'+(data[index].Company==null?'':data[index].Company)+'" readonly>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                            '<label class="ui-border-r">学校</label>'+
                                            '<input type="text" value="'+(data[index].SchoolName==null?'':data[index].SchoolName)+'" readonly>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-border-b">'+
                                            '<label class="ui-border-r">地址</label>'+
                                            '<input type="text" value="'+(data[index].Address==null?'':data[index].Address)+'" readonly>'+
                                        '</div>'+
                                        '<div class="ui-form-item ui-form-item-l ui-form-item-textarea ui-border-b">'+
                                            '<label>介绍</label>'+
                                            '<textarea readonly>'+(data[index].Description==null?'':data[index].Description)+'</textarea>'+
                                        '</div>'+
                                    '</form>'+
                                '</div>';
                            }
                            $("#ClassMateContent").append(htmlContext);
                            $.NextPage();
                        }
                    });
                }
            });
        })
    </script>
}